<template>
    <scroller class="container">
        <div>
            <head-bar height="80" middleText="新建跟进" :leftClick="returnPage"></head-bar>
        </div>
        <div class="follow-content">
            <div class="content-label">
                <text class="content-label-tag">*</text>
                <text class="content-label-t">跟进内容</text>
            </div>
            <textarea placeholder="请输入跟进内容" @input="getFollowContentVal" class="content"></textarea>

            <waterfall class="image-area" :style="_autoHeightStyle" column-width="150"  column-count="auto" left-gap="20" column-gap="5">
                <cell v-for="(img,index) in imgs">
                    <div class="image-panel">
                        <image @click="openSlide(index)" class="image-i" :src="img.thumbUrl"></image>
                    </div>
                    <wxc-icon @wxcIconClicked="deleImg(index)" class="del-image" name="close" :icon-style="{color:'#ff8c71',fontSize:30}"></wxc-icon>
                </cell>
            </waterfall>

            <div class="content-type-area">
                <div @click="openCamera" class="content-type-panel border-right-line">
                    <image class="content-type-camera icon" src="root:img/icon/camera.png"></image>
                </div>
                <div @click="openPhoto" class="content-type-panel">
                    <image class="content-type-photo icon" src="root:img/icon/photo.png"></image>
                </div>
            </div>
        </div>
        <cell-input :disabled="true" type="text" :value="orgName" :hasTopBorder="true" label="*"  title="客户名称"></cell-input>
        <cell-date label="*" title="跟进日期" @getVal="getFollowTimeVal"></cell-date>
        <cell-select label="*" :selectData="followTypeData" @getVal="getFollowTypeVal" title="跟进类型"></cell-select>
        <cell-select label="*" :selectData="followMethodData" @getVal="getFollowMethodVal" title="跟进方式"></cell-select>
        <cell-select label="*" :selectData="linkManData" @getVal="getLinkManVal" title="联系人"></cell-select>


        <wxc-cell :has-top-border="false" title="为下次跟进新建代办任务">
            <switch :checked="nextFollowTypeChecked" slot="value" @change="nextFollowTypeChecked = !nextFollowTypeChecked"></switch>
        </wxc-cell>


        <div class="submit-area" @click="submitForm">
            <text class="submit-btn">保存</text>
        </div>

        <wxc-lightbox
                ref="wxc-lightbox"
                height="800"
                :show="showSlide"
                :image-list="imageList"
                :index="slideIndex"
                @wxcLightboxOverlayClicked="wxcLightboxOverlayClicked">
        </wxc-lightbox>

    </scroller>
</template>


<style scoped>
    .time-div {
        height: 100px;
        width: 750px;
    }
</style>

<style>
    .container {
        flex-direction: column;
        background-color: #F6F6F6;
    }

    .icon {
        width: 50px;
        height: 50px;
    }

    .content-type-photo {

    }

    .content-type-camera {

    }

    .content-type-panel {
        width: 360px;
        height: 75px;
        background-color: white;
        justify-content: center;
        align-items: center;
    }

    .border-right-line {
        border-right-color: #e2e2e2;
        border-right-width: 1px;
    }

    .content-type-area {
        flex-direction: row;
        width: 750px;
        height: 75px;
        border-top-color: #e2e2e2;
        border-top-width: 1px;
        padding-left: 20px;
    }

    .content {
        width: 750px;
        height: 200px;
        padding-left: 20px;
    }

    .follow-content {
        background-color: white;
        padding-top: 36px;
    }

    .content-label {
        flex-direction: row;
        padding-left: 15px;
        width: 750px;
    }

    .content-label-tag {
        font-size: 32px;
        color: #ff5d54;
    }

    .content-label-t {
        font-size: 32px;
        color: #272727;
    }
    
    .image-area{
        justify-content: flex-start;
    }
    
    .image-panel{
        width:150px;
        height:150px;
        border-width: 1px;border-color: #d1d1d1;
        margin-bottom: 20px;
        margin-top:20px;
    }

    .image-i{
        width: 150px;
        height: 150px;
    }

    .del-image{
        position: absolute;
        background-color: white;
        border-radius: 50px;
        left:120;
        top:0;
        width:50px;
        height:50px;
        /*text-align: center;*/
        padding-left:10px;
        padding-top:10px;
        box-shadow: focus 1px 1px rgb(181, 181, 181);
    }

    .submit-area {
        margin-top: 10px;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 0;
        width: 750px;
        height: 90px;
        background-color: #01A65A;
    }

    .submit-btn {
        font-size: 30px;
        color: white;
    }

    
</style>

<script>
    import {WxcCell,WxcIcon,WxcLightbox} from 'weex-ui'

    import headBar from '../components/headBar.vue'
    import cellDate from '../components/cellDate.vue'
    import cellInput from '../components/cellInput.vue'
    import cellSelect from '../components/cellSelect.vue'
    import nw from '../network/nw.js'
    import stl from '../utils/stringUtils.js'

    export default {
        components: {WxcIcon,headBar, cellInput, cellSelect, cellDate,WxcCell,WxcLightbox},
        data: {
            nextFollowTypeChecked:false,//是否转任务
            imgs:[],
            imageList:[],
            showSlide:false,//是否显示幻灯片
            slideIndex:0,//是否显示幻灯片
            orgName:'',//机构名称
            form: {
                followTime: '',
                followContent: '',
                contentType: '1000',//内容的类型1000:文本内容，1100：图片内容，1200:视屏内容
                contentType: '1000',//内容的类型1000:文本内容，1100：图片内容，1200:视屏内容
                nextFollowType:'',
            },
            followTypeData: [
                //1000:客户，1100：普天宝，1200：商品，1300：订单，1400：财务，1500：投诉，1600：其他，1700：确认需求，1800：跟踪维护
                {name: '客户', value: '1000'},
                {name: '普天宝', value: '1100'},
                {name: '商品', value: '1200'},
                {name: '订单', value: '1300'},
                {name: '财务', value: '1400'},
                {name: '投诉', value: '1500'},
                {name: '其他', value: '1600'},
                {name: '确认需求', value: '1700'},
                {name: '跟踪维护', value: '1800'}
            ],
            followMethodData: [
                {name: '电话', value: '1000'},
                {name: 'QQ或微信', value: '1100'},
                {name: '现场拜访', value: '1200'}
            ],
            linkManData: [],
            param:{}
        },
        computed:{
            _autoHeightStyle:function(){

                if(this.imgs.length == 0 ) {
                    return {height:0}
                }else{

                    var index = parseInt(this.imgs.length/4)

                    var remain =  this.imgs.length % 4

                    if(remain > 0 ) {
                        index += 1
                    }

                    return {height: index * 200}
                }

            }
        },
        methods: {
            //返回上个页面
            returnPage() {
                const navigator = weex.requireModule('navigator')
                navigator.back()
            },
            //关闭幻灯片
            wxcLightboxOverlayClicked(){
                this.showSlide = false
            },
            //打开幻灯片
            openSlide(index){
                this.slideIndex = index
                this.showSlide = true
            },

            //删除图片
            deleImg(index){
                this.imgs.splice(index,1)
            },

            //跟进内容
            getFollowContentVal(e){
                this.form.followContent = e.value
            },

            //跟进时间
            getFollowTimeVal(data) {
                this.form.followTime = data+':00'
            },

            //跟进类型
            getFollowTypeVal(data) {
                this.form.followType = data[0]
            },
            //跟进方式
            getFollowMethodVal(data) {
                this.form.followMethod = data[0]
            },
            //联系人
            getLinkManVal(data) {
                this.form.contactName = data[0]
            },

            //打开相机
            openCamera() {
                var self=this

                const photo = weex.requireModule('photo')
                photo.openCamera(500,800,'#01A65A',function(e){
                    nw.postFile(e.path,{
                        success(res){
                            for(let i in res){
                                var ele = res[i]
                                self.imgs.push(ele)
                                self.imageList.push({
                                    src:ele.url
                                })
                            }
                        }
                    })
                })
            },


            //打开相册
            openPhoto() {
                var self=this;
                const photo = weex.requireModule('photo');
                photo.openPhoto(500,800,'#01A65A','#ffffff','red',function(e){
                    nw.postFile(e.path,{
                        success(res){
                            for(let i in res){
                                var ele = res[i]
                                self.imgs.push(ele)
                                self.imageList.push({
                                    src:ele.url
                                })
                            }
                        }
                    })
                })
            },

            //提交表单
            submitForm(){
                var modal = weex.requireModule('modal')
                var f = this.form

                if(stl.isUndefinedNull(this.param.userId)) {
                    return modal.toast({message:'客户不能为空'})
                }

                f.userId = this.param.userId


                if(stl.isUndefinedNull(this.param.userType)) {
                    return modal.toast({message:'请指定客户类型'})
                }

                f.userType = this.param.userType

                if(this.imgs.length == 0 ) {
                    if(stl.isNonEmpty(f.followContent)) {
                        modal.toast({message:'跟进内容不能为空'})
                        return
                    }
                    f.contentType = 1000
                }else{
                    f.contentType = 1100
                }

                var imgs = ''
                for(let i in this.imgs){
                    var img = this.imgs[i]
                    imgs += ','+img.key
                }

                if(!stl.isEmpty(imgs)) {
                   f.contentFiles = imgs.substring(1)
                }


                if(stl.isUndefinedNull(f.followTime)) {
                    return modal.toast({message:'跟进日期不能为空'})
                }

                if(stl.isUndefinedNull(f.followType)) {
                    return modal.toast({message:'跟进类型不能为空'})
                }

                if(stl.isUndefinedNull(f.followMethod)) {
                    return modal.toast({message:'跟进方式不能为空'})
                }

                if(stl.isUndefinedNull(f.contactName)) {
                    return modal.toast({message:'联系人不能为空'})
                }


//                modal.alert({message:f})
//                return
                nw.postDefine('/app/yxq/follow/add',{
                    data:f,
                    success(res){
                        const navigator = weex.requireModule('navigator')
                        navigator.back()
                    }
                })
            },


            onLoad(){
                const navigator = weex.requireModule('navigator')

                var param = navigator.param()
                this.param = param

                var self = this
                var f = this.form
                f.userType = param.userType
                f.userId = param.userId
                this.orgName = param.orgName
                nw.postDefine('/app/yxq/follow/queryUserAndContect', {
                    data: {userType: param.userType, userId: param.userId},
//                data: {userType: 'buyer', userId: '137'},
                    success(res) {
                        for (let i in res) {
                            var ele = res[i]
                            if (ele) {
                                self.linkManData.push({name: ele.userName, value: ele.userName})
                            }
                        }
                    }
                })
            }


        }
    }
</script>